import { useSessionStorageState } from 'ahooks'
import _ from 'lodash'
import dayjs from 'dayjs'
import { Button, DatePicker, Select, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'

import { TextAreaFilter } from '@/components/TextAreaFilter'
import { useDateRangePresets } from '@/hooks/hooks'
import { selectFilterOption } from '@/utils/utils'
import { useBusinessUsers } from '@oBiz/hooks/SWRApi/useBusinessUsers'
import { useChannels } from '@oBiz/hooks/SWRApi/useChannels'
import { useMerchants } from '@oBiz/hooks/SWRApi/useMerchants'
import { defaultParams, useBoundStore } from '../../store'
import { getSearchFieldName } from '../../utils'
import styles from '../../styles.module.less'

export const Filter = () => {
  const serviceProviderRes = useMerchants()
  const logisticsChannelRes = useChannels()
  const setReqData = useBoundStore(v => v.setReqData)
  const reqData = useBoundStore(v => v.reqData)
  const getData = useBoundStore(v => v.getData)
  const [open, setOpen] = useSessionStorageState(`fba_${$APP}_bizTrackManageListFilterOpen`, { defaultValue: false })
  const businessUsersRes = useBusinessUsers()
  const dateRangePresets = useDateRangePresets()

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  return (
    <div>
      <div className={open ? styles.openFilter : ''}>
        <Space wrap size={18}>
          <Space size={8}>
            <Space.Compact>
              <Select
                style={{ width: 100 }}
                defaultValue={1 as number}
                options={getSearchFieldName.valueList.map(v => ({ label: getSearchFieldName(v), value: v }))}
                onChange={v => setReqData({ searchField: v ?? undefined })}
              />
              <TextAreaFilter
                placeholder="请输入搜索内容"
                textAreaPlaceholder="支持单号,客户,供应商,产品 ,物流单号。多个内容请换行"
                value={reqData.searchWords?.join('\n')}
                onChange={searchWords => setReqData({ searchWords: searchWords.split('\n') })}
              />
            </Space.Compact>
          </Space>
          <Space size={8}>
            服务商
            <Select
              style={{ width: 200 }}
              placeholder="请选择"
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              allowClear
              showSearch
              loading={serviceProviderRes.loading}
              options={serviceProviderRes.data?.list.map(d => ({ label: d.name, value: d.id }))}
              filterOption={selectFilterOption}
              value={reqData.merchantIds}
              onChange={v => setReqData({ merchantIds: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            物流渠道
            <Select
              placeholder="请选择"
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              allowClear
              showSearch
              loading={logisticsChannelRes.loading}
              options={logisticsChannelRes.data?.list.map(d => ({ label: d.channelName, value: d.channelId })) || []}
              style={{ width: 200 }}
              value={reqData.logisticsChannelIds || []}
              onChange={(val: number[] | undefined) => setReqData({ logisticsChannelIds: val || undefined })}
            />
          </Space>
          <Space size={8}>
            业务员
            <Select
              placeholder="请选择"
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              allowClear
              showSearch
              loading={businessUsersRes.loading}
              options={businessUsersRes.data?.list.map(d => ({ label: d.name || d.englishName, value: d.id }))}
              filterOption={selectFilterOption}
              style={{ width: 200 }}
              value={reqData.businessUserIds || []}
              onChange={(val: number[] | undefined) => setReqData({ businessUserIds: val || undefined })}
            />
          </Space>
          <Space size={8}>
            港后跟单
            <Select
              placeholder="请选择"
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              allowClear
              showSearch
              loading={businessUsersRes.loading}
              options={businessUsersRes.data?.list.map(d => ({ label: d.name || d.englishName, value: d.id }))}
              filterOption={selectFilterOption}
              style={{ width: 200 }}
              value={reqData.gangHouUserIds || []}
              onChange={(val: number[] | undefined) => setReqData({ gangHouUserIds: val || undefined })}
            />
          </Space>
          <Space size={8}>
            发货时间
            <DatePicker.RangePicker
              format="YYYY-MM-DD"
              style={{ width: 250 }}
              presets={[
                dateRangePresets.today,
                dateRangePresets.yesterday,
                dateRangePresets.thisWeek,
                dateRangePresets.lastWeek,
                dateRangePresets.thisMonth,
                dateRangePresets.lastMonth,
                dateRangePresets.last7days,
                dateRangePresets.last30days,
                dateRangePresets.last6months,
              ]}
              value={
                reqData.shipmentDateStart && reqData.shipmentDateStartEnd
                  ? [dayjs(reqData.shipmentDateStart), dayjs(reqData.shipmentDateStartEnd)]
                  : undefined
              }
              onChange={(_dates, dateStrs) =>
                setReqData({
                  shipmentDateStart: dateStrs[0] || undefined,
                  shipmentDateStartEnd: dateStrs[1] || undefined,
                })
              }
            />
          </Space>
          {/* <Space size={8}>
            ShipTrack
            <Select
              placeholder="请选择"
              style={{ width: 200 }}
              options={getShipTrackStatusName.valueList.map(v => ({ label: getShipTrackStatusName(v), value: v }))}
              value={reqData.shipTrackStatus}
              onChange={(val: number | undefined) => setReqData({ shipTrackStatus: val || undefined })}
            />
          </Space> */}
        </Space>
        <Space align="start" size={6}>
          <Space>
            <Button
              onClick={() => {
                setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
                getData(true)
              }}
            >
              重置
            </Button>
            <Button type="primary" onClick={handleQuery}>
              查询
            </Button>
            <Button type="link" onClick={() => setOpen(!open)}>
              {open ? '收起' : '展开'}
              <DownOutlined rotate={open ? 180 : 0} />
            </Button>
          </Space>
        </Space>
      </div>
    </div>
  )
}
